<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader>我的订单</IHeader>
    </template>

    <!-- 订单列表容器 -->
    <view class="order-list-container wh_auto">
      <!-- 多订单循环展示 -->
      <OrderRow :order="item" v-for="(item, index) in orderList" :key="index"></OrderRow>
      <!-- 空状态提示 -->
      <view class="wrapper whov" v-if="orderList.length === 0">
        <text class="empty-text">暂无订单记录</text>
      </view>
    </view>

    <template #footer>
      <ITabBar :index="-1" />
    </template>
  </IFexHeaderMain>
</template>

<script setup lang="ts">
  import ITabBar from '@/components/container/ITabBar.vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import OrderRow from './components/OrderRow.vue'
  import { onMounted, ref, computed } from 'vue'
  import { getUseOrderInfoAllList } from '@/api/currentLocker'
  import useUserInfoStore from '@/store/userInfo'
  import useToastMsg from '@/hooks/sysMsg'
  const toastMsg = useToastMsg()
  const orderList = ref<any[]>([])
  const userInfoStore = useUserInfoStore()
  const userInfo = computed(() => userInfoStore.getUserInfo)
  onMounted(async () => init())
  const init = async () => {
    toastMsg.showLoading()
    const result = await getUseOrderInfoAllList(userInfo.value.userId)
    if (result) {
      orderList.value = result.data
    }
    toastMsg.hideLoading()
  }
</script>
<style scoped>
  .order-list-container {
    padding: 20rpx;
    background-color: #f5f7fa;
    box-sizing: border-box;
  }

  .empty-text {
      font-size: 28rpx;
    color: #94a3b8;
    margin-top: 20rpx;
  }
</style>
<style scoped></style>
